<template>
  <!-- 自定义列 -->
  <a-dropdown
    :visible="colVisible"
    @visibleChange="handleColVisibleChange"
    :getPopupContainer="
      (triggerNode) => {
        return triggerNode?.parentNode || document.body;
      }
    "
    placement="bottomRight"
  >
    <a-tooltip placement="top">
      <template #title v-if="item.desc">{{ item.desc }}</template>
      <a-button class="margin-10" @click="handleTextCopy()">
        {{ item.character }}
      </a-button>
    </a-tooltip>
    <template #overlay>
      <a-menu class="drop-menu">
        <a-menu-item class="list-group-item" style="border-bottom: 1px solid #f1f1f1">
          <a-checkbox v-model:checked="colCheckAll" @change="onCheckAllChange">
             <span style="margin-left: 10px; font-size: 12px; padding: 0">
              全部
            </span>
          </a-checkbox>
        </a-menu-item>
        <draggable
          class="list-group"
          group="transition-group"
          v-model="columns"
          v-bind="dragOptions"
          :move="onMove"
          filter=".forbid"
          item-key="id"
        >
          <template #item="{ element }">
            <li
              :class="
                element.disabled ? 'list-group-item forbid' : 'list-group-item'
              "
              :style="
                element.disabled ? 'list-group-item forbid' : 'list-group-item'
              "
            >
              <span>
                <a-checkbox
                  size="large"
                  v-model:checked="element.checked"
                  :disabled="element.disabled"
                  @change="onCheckItemChange"
                ></a-checkbox>
                <span class="title">{{ element.value }}</span>
              </span>
              <LockOutlined
                v-if="element.disabled"
                style="color: #999999; padding-right: 15px"
              />
              <UnorderedListOutlined
                v-else
                style="color: #999999; padding-right: 15px"
              />
            </li>
          </template>
        </draggable>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script>
import {
  InsertRowAboveOutlined,
  UnorderedListOutlined,
  LockOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  computed,
} from "@vue/runtime-core";
import draggable from "vuedraggable";
import utils from "@/common/utils/utils";

export default defineComponent({
  name: "CustomColumns",
  components: {
    draggable,
    UnorderedListOutlined,
    LockOutlined,
    SettingOutlined,
    InsertRowAboveOutlined,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    tableFields: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      columns: [],
      colVisible: false,
      colCheckAll: false,
    });
    //   获取列数据
    const getColumnsData = () => {
      let haveCheck = false;
      let list = props.item?.table?.list || [];
      Object.keys(props.tableFields).forEach((keys) => {
        if (keys === props.item?.table?.name) {
          haveCheck = true;
          let currentList = props.tableFields[keys];
          if (currentList.length) {
            let noCheckedList = list.filter((v) => !currentList.find((item) => item.name == v.name))
            list = currentList.concat(noCheckedList);
          }
          list = list.map((v) => {
            let result = props.tableFields[keys].filter(
              (item) => item.name == v.name
            )[0];
            if (result) {
              v.checked = Object.hasOwn(result, "checked")
                ? result.checked
                : true;
            } else {
              v.checked = false;
            }
            return v;
          });
        }
      });
      if (!haveCheck) {
        list = list.map((v) => {
          v.checked = true;
          return v;
        });
      }
      state.columns = list;

      getColumns();
    };

    const getColumns = () => {
      let arr = [];
      let checkall = true;
      state.columns.forEach((item) => {
        arr.push(item);
        if (checkall && !item.checked) {
          checkall = false;
        }
      });
      state.colCheckAll = checkall;
      emit("getColumns", arr);
    };

    const handleColVisibleChange = (visible) => {
      if (props.item?.table?.list?.length) {
        if (visible == false) {
          // 调取接口存住选项
          getColumns();
        }
        state.colVisible = visible;
      } else {
        state.colVisible = false;
      }
    };
    // 监听全部选中
    const onCheckAllChange = (e) => {
      const { checked } = e.target;
      state.colCheckAll = checked;
      state.columns.forEach((item) => {
        if (!item.disabled) {
          item.checked = checked;
        }
      });
    };
    // 监听选中
    const onCheckItemChange = (e) => {
      const { checked } = e.target;
      if (checked && columnsDataCheckAll()) {
        state.colCheckAll = true;
      } else {
        state.colCheckAll = false;
      }
    };
    // 是否全选
    const columnsDataCheckAll = () => {
      for (let item of state.columns) {
        if (!item.checked) {
          return false;
        }
      }
      return true;
    };

    getColumnsData();

    const dragOptions = computed(() => {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    });
    //禁止拖动到id为1的对象
    const onMove = (e) => {
      if (e.relatedContext.element.disabled) return false;
      return true;
    };

    const handleTextCopy = () => {
      utils.copyText(props.item.character);
    };

    return {
      ...toRefs(state),
      handleColVisibleChange,
      onCheckAllChange,
      onCheckItemChange,

      dragOptions,
      onMove,
      handleTextCopy,
    };
  },
});
</script>
<style lang="less" scoped>
.list-group {
  min-height: 20px;
  padding-left: 0;
}
.list-group-item {
  cursor: pointer;
  width: 180px;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  .title {
    margin-left: 10px;
    font-size: 12px;
    width: 120px;
  }
}

:deep(.ant-checkbox + span) {
  padding: 0;
}

.drop-menu {
  height: 350px;
  overflow-y: scroll;
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
}

::-webkit-scrollbar {
  width: 5px; /*对垂直流动条有效*/
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #dddee0;
}

:deep(.ant-btn-link) {
  margin-right: 0;
}
</style>
